<template>
  <div id="bbsDetailsSt">
    <el-card class="box-card">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <h1>{{bbsArticle.artTitle}}</h1>

            <p style="    margin-left: 200px;
    margin-right: 200px;">
              <img
                :src="'/download/'+bbsArticle.imageUrl"
                align="right"
                style="    width: 500px; margin-left: 30px;margin-bottom: 30px;"
                hspace="5"
                vspace="5"
              />
              {{bbsArticle.artContent}}
            </p>
          </div>

          <!-- <div class="grid-content bg-purple-dark">
          <img
                :src="'yjl/download/'+bbsArticle.imageUrl"
                class="image"
              />
          </div>-->
          <!-- <div class="grid-content bg-purple-dark" style="margin-left: 100px;
    margin-right: 100px;    background-color: aqua;">
          <p></p>-->
          <!-- </div> -->

          <div class="grid-content bg-purple-dark" style="     border-top: 2px solid black;">
            <el-row>
              <el-col
                :span="24"
                v-for="(o) in comment"
                :key="o.id"
                style="margin-top:20px; padding: 14px;  border-top: 2px solid black;"
              >
                <div>
                  <span>评论时间:</span>
                  {{o.createDate}}
                </div>
                <div>
                  <span>评论内容:</span>
                  {{o.detile}}
                </div>
                <div>
                  <span>评论人:</span>
                  {{o.createUserName}}
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import http from "../../utils/https";
export default {
  name: "BbsDetails",
  data() {
    return {
      keys: "",
      o: "",
      bbsArticle: {
        id: "",
        artUserId: "123",
        artTitle: "",
        artTypeId: "12321y",
        artContent: "123",
        artCreTime: "123123",
        artView: "",
        artComNum: "",
        artLikeNum: ""
      },
      comment: []
    };
  },

  beforeCreate() {
    console.log("bbs1");
  },

  created() {
    console.log("bbs2");
  },

  beforeMount() {
    console.log("bbs3");
  },

  mounted() {
    this.initBbsDetails();
  },

  beforeUpdate() {
    console.log("bbs5");
  },

  updated() {
    console.log("bbs6");
  },

  beforeDestroy() {
    console.log("bbs7");
  },

  destroyed() {
    console.log("bbs8");
  },

  activated() {
    console.log("bbs9");
  },

  deactivated() {
    console.log("bbs10");
  },

  methods: {
    initBbsDetails() {
      let id = this.$route.params.id;
      http
        .get({
          url: "/yjl/bbs-article/" + id
        })
        .then(res => {
          if (res.code == 200) {
            console.log(res);
            this.bbsArticle = res.content;
            this.comment = this.bbsArticle.comment;
            console.log(this.comment);
          }
        });
    }
  },

  computed: {}
};
</script>

<style>
</style>
